<html xmlns:th="http://www.thymeleaf.org"  
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"    
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">    
<html>
<head th:include="common/common::header">
<meta charset="UTF-8">

<style type="text/css">
#index {
	padding: 15px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	opacity: 0;
	font-size: 12px;
}

.index-l {
	padding: 10px;
	width: 48%;
	overflow: auto;
}
</style>
</head>

<body>
	<div id="index">
		<form id="SysUserDtos_form" class="easyui-form" method="post" data-options="novalidate:true">
		<div class="contentWrapper">
			<!--tab-->
			<div class="index-l">
				<div id="tt" class="easyui-tabs" data-options="tabHeight:31"
					style="width: 100%;">
					<div title="修改头像"
								style="overflow: auto; padding: 20px; display: none;">
                    			<br>
                    			<input type="hidden" id="sysUser_id" name="id" th:value="${SysUserDto.id }">
                    			<input type="hidden" id="sysUser_head" name="head" th:value="${SysUserDto.head }">
                    			<div class="form-item">
									    <input type="file" class="preview-file" id="preview-file" name="sysUserhead">
									    <p style="width:800px;"><b>头像设置</b></p>
									    <div class="preview-set-panel" style="width:800px;">
									    	<div class="left">
									    	<!--  onerror="javascript:this.src='${head_image }';" -->
									        	<img id="image" src="" onclick="onfile()"  th:attr="onerror='javascript:this.src='+${head_image }+''" alt="Picture">
									        </div>
									        <div class="right">
									        	<div class="preview-caption">预览</div>
									            <div class="preview-content">
									              <div class="preview-cut preview-129"></div>
									              <div class="preview-cut preview-86"></div>
									              <div class="preview-cut preview-43"></div>
									            </div>
									        </div>
									    </div>
									   <a class="easyui-linkbutton button-danger" href="javascript:void(0)" onClick="onfile()">选择图片</a>
									   <a class="easyui-linkbutton button-danger" href="javascript:void(0)" id="image_save">上传头像</a>  
                    			</div>
						</div>
				</div>
			</div>
					<div style="margin-top: 1%; padding-left: 37.5%">
						<a href="javascript:void(0)" onclick="submitForm()" class="easyui-linkbutton"data-options="iconCls:'fa fa-floppy-o'"style="height: 30px; border-left-width: 1px;">保存</a> 
						<a id="SysUserDtos_close" onclick="closedialog(this)"href="javascript:void(0)" class="easyui-linkbutton"data-options="iconCls:'fa fa-ban'"style="height: 30px; border-left-width: 1px;">取消</a>
					</div>
		</form>
	</div>
<link href="/base/cropper-2.3.4/dist/cropper.min.css" rel="stylesheet" type="text/css">
<script src="/base/cropper-2.3.4/dist/cropper.min.js"></script>
<script src="/base/js/ajaxfileupload.js"></script>
<script type="text/javascript">

function submitForm(){
	$('#SysUserDtos_form').form('submit',{
		url:'/system/user/save_head.do',
		onSubmit:function(){
			return $(this).form('enableValidation').form('validate');
		},
		 success: function (data) {
			 if (JSON.parse(data).status ==200) {
				 layer.msg("保存成功",{icon:1,time:3000});
				} else {
						$.messager.alert('消息',JSON.parse(data).msg);
				}
		 }
	});
}



$(function(){
	
	var ImgOptions = {
		aspectRatio: 1 / 1,
		preview: '.preview-cut',
		minCanvasWidth:129,//类型：Number，默认值200。容器的最小宽度。
		minCanvasHeight:129,//类型：Number，默认值100。容器的最小高度。
		crop: function (e) {
		}
	  };

		var $image = $('#image');
	var URL = window.URL || window.webkitURL;
	  // Keyboard
	  $(document.body).on('keydown', function (e) {
	
		if (!$image.data('cropper') || this.scrollTop > 300) {
		  return;
		}
	
		switch (e.which) {
		  case 37:
			e.preventDefault();
			$image.cropper('move', -1, 0);
			break;
	
		  case 38:
			e.preventDefault();
			$image.cropper('move', 0, -1);
			break;
	
		  case 39:
			e.preventDefault();
			$image.cropper('move', 1, 0);
			break;
	
		  case 40:
			e.preventDefault();
			$image.cropper('move', 0, 1);
			break;
		}
	
	  });

	$image.on({
		'build.cropper': function (e) {
		  console.log(e.type);
		},
		'built.cropper': function (e) {
		  console.log(e.type);
		},
		'cropstart.cropper': function (e) {
		  console.log(e.type, e.action);
		},
		'cropmove.cropper': function (e) {
		  console.log(e.type, e.action);
		},
		'cropend.cropper': function (e) {
		  console.log(e.type, e.action);
		},
		'crop.cropper': function (e) {
		  console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
		},
		'zoom.cropper': function (e) {
		  console.log(e.type, e.ratio);
		}
	 }).cropper(ImgOptions);
	 
	var fileName; //选择上传的文件名
	 $('#preview-file').change(function(){
	      var file = this.files[0];
	      fileName = file.name;
	 })
	 
	$('#image_save').click(function() {
	      var type = $image.attr('src').split(';')[0].split(':')[1];

	      var canVas = $image.cropper("getCroppedCanvas", {});
	      //将裁剪的图片加载到face_image
	      $('#face_image').attr('src', canVas.toDataURL());
	      canVas.toBlob(function(blob) {
	          var formData = new FormData();
	          formData.append("file", blob, fileName);

	          $.ajax({
	              type: "POST",
	              url: '/common/upload',
	              data: formData,
	              contentType: false, //必须
	              processData: false, //必须
	              dataType: "json",
	              success: function(data){
	            	  if (data.state =='SUCCESS') {
	            		  layer.msg("上传成功",{icon:1,time:3000});
	            		  $('#sysUser_head').val(data.id);
	            	  }
	                  //上传成功
	              },
	              error : function() {
	                  //清空上传文件的值
	                  $('#preview-file').val('');
	              }
	          });
	      }, type);
	  });

});

function onfile(){
	//模拟file控件
	var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;  
	if(ie){  
		document.getElementById('preview-file').click();  
	}else{            
		var mouseobj = document.createEvent("MouseEvents");  
		mouseobj.initEvent("click", true, true);    
		document.getElementById('preview-file').dispatchEvent(mouseobj);  
	}  
	 var previewFile=$('#preview-file');
	 previewFile.on("change",function(){
	 	var files = this.files;
	 	var file;
	 	if (files && files.length) {
			file = files[0];
			if (/^image\/\w+$/.test(file.type)) {
				blobURL = URL.createObjectURL(file);
				
				$('#image').one('built.cropper', function () {
					URL.revokeObjectURL(blobURL);
				}).cropper('reset').cropper('replace', blobURL);
	
				previewFile.val('');
			} else {
				alert('请选择一个图像文件.');
			}
	 	}
	 });
}

</script>
</body>
</html>